[Repro] [iOS] WebView上のイベントトラッキングをしてみた #repro

田中賢治

2016.12.19

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

はじめに

こんぬづは、お金の使い方が下手すぎて、会う人会う人に「君いつもお金ないね」って言われちゃう田中です！

昨日（12/18(日)）Reproさんの会議室を借りてSwift愛好会グループの面々が集まって自由に開発をする部活みたいな会が開催されたのですが、この記事ではそのときゲリラ開催されたReproのWebViewイベントトラッキングハンズオンの内容を、ドキュメントをもとに解説していきます！

イベントトラッキングしてみた

手順はこちらのドキュメントを元にしています。

この資料のとおり実装して、撮影した動画からイベントトラッキングを確認するとこんな風に見ることができます。

スクリーンショット_2016-12-19_11_55_12

iOS側

Reproのセットアップをする

初期セットアップの詳しい内容はこちらをご参照ください。

@UIApplicationMain
class AppDelegate: UIResponder, UIApplicationDelegate {

    ...
    
    func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplicationLaunchOptionsKey: Any]?) -> Bool {
        
        Repro.setup("YOUR_APP_TOKEN")
        Repro.startRecording()
        
        return true
    }
    
    ...
    
}

次のWebViewのセットアップはUIWebViewとWKWebViewそれぞれの方法を紹介します。

WebViewのセットアップ

// UIWebViewによる実装

import UIKit
import Repro

class ViewController: UIViewController {

    @IBOutlet weak var webView: UIWebView!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        Repro.startWebViewTracking(self)
        webView.delegate = self
    }
}

// WKWebViewによる実装

import UIKit
import Repro

class ViewController: UIViewController {
    
    var webView: WKWebView!
    
    override func viewDidLoad() {
        super.viewDidLoad()

        webView = WKWebView()
        
        Repro.startWebViewTracking(self)
        webView.delegate = self
    }
}

UIWebViewはInterface Builderでつないだ方法になります。WKWebViewはInterface Builderで扱うことができないので、ソースコードでの実装をする必要があります。

そしてRepro.startWebViewTracking(self)によって、webViewのトラッキングを開始することができます。

Web側

HTMLのheaderでreproのjavascriptライブラリをロードする

<head>
...
<script src="//s3-ap-northeast-1.amazonaws.com/cdn.repro.io/js/v2/repro.js" type="text/javascript" charset="utf-8"></script>
...
</head>

イベントトラッキングしたい箇所でrepro.track()する

ここではボタンの押下時にイベントをReproに送信するように書いてみます。HTMLにベタ書きですがこんな感じ。

<body>
<button onClick="return tappedButton()">ボタン</button>
<script type="text/javascript">
	function tappedButton() {
		repro.track("tapped button from webview");
	}
</script>
</body>

もはや解説するまでもないほどに簡単！なので、中の人に聞いたできること、できないことも紹介します。

中の人に聞いたできること、できないこと

Reproに対応したWebページならばどれでもトラッキングできる

上記手順に従ってtrackイベントを埋め込んであるページであれば自前で用意したWebページのみならず、よそのWebページもトラッキングできるとのこと。あまりそれをやるメリットは思いつきませんが、「一応できるよ！」という小ネタを教えていただけました。

UIWebView, WKWebViewはどちらもトラッキングできるがSFSafariViewControllerはトラッキングできない

というのもUIWebView, WKWebViewのイベントはDelegateメソッドでハンドリングすることができますが、SFSafariViewControllerのイベントはハンドリングすることができないためトラッキングをすることはできないとのことでした。

まとめ

iOS側

Reproのセットアップをする
WebViewをセットアップする
Repro.startWebViewTracking()する

Web側

HTMLのheaderでreproのjavascriptライブラリをロードする
イベントトラッキングしたい箇所でrepro.track()する

簡単に導入できる利点として、Webとモバイルアプリの開発がそれぞれ別の会社で担当している時に起こりがちな「Web側としてなにをやればトラッキング対応を完了できるのかがわかりづらい」という問題を解消しやすいところが挙げられます。離れた位置にいる別のチームと連携して、意図した実装をしてもらうことの難しさ、コミュニケーションコストが想定以上にかかってしまったという経験があるので、ここは嬉しいポイントだと思いました。